<template>
  <div class="addForm">
    <div class="addForm_for">
      <el-form ref="formDataRef" :model="AddFormData" label-width="120px" style="padding-bottom: 85px;">
        <el-row id="essential_information">
          <el-col :span="24" class="fontWeight600 mb25">
            基本信息
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="商品名称" prop="goodsName">
              <el-input v-model="AddFormData.goodsName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库存编码" prop="goodsCode">
              <el-input v-model="AddFormData.goodsCode" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格材质" prop="goodsSku">
              <el-input v-model="AddFormData.goodsSku" disabled type="textarea" autosize show-word-limit
                class="ability_info" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row id="essential_information">
          <el-col :span="24" class="fontWeight600 mb25">
            其他信息
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="售卖部门" prop="anchor">
              <el-input v-model="AddFormData.anchor" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="售卖规格" prop="sellSku">
              <el-input v-model="AddFormData.sellSku" disabled type="textarea" autosize show-word-limit
                class="ability_info" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="卖价/佣金" prop="commission">
              <el-input v-model="AddFormData.commission" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="供应商名称" prop="supplierName">
              <el-input v-model="AddFormData.supplierName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间" prop="createTime">
              <el-input v-model="AddFormData.createTime" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="AddFormData.remark" disabled type="textarea" autosize show-word-limit
                class="ability_info" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row id="essential_information">
          <el-col :span="24" class="fontWeight600 mb25">
            商品状态
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="商品状态" prop="goodsStatus">
              <el-input v-model="AddFormData.goodsStatus" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row id="essential_information">
          <el-col :span="24" class="fontWeight600 mb25">
            图片
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品图片" prop="goodsImg">
              <ImageUploadDrags v-model="AddFormData.goodsImg" :limit="5" :format="true"
                :isType="false" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';
defineProps(['AddFormData']);
const emit = defineEmits(['onSubmit']);
</script>

<style lang="scss" scoped>
.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}

.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}

.supplierSelect_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.el-select-loading__tips {
  color: #606266;
  font-size: 14px;
}

.addForm {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;

  .screen {
    display: flex;
    align-items: center;
    cursor: pointer;

    .screen_div {
      width: 106px;
      height: 44px;
      background: #ebf7ff;
      text-align: center;
      line-height: 44px;
      font-weight: 500;
      font-size: 14px;
      color: #0094ff;
    }

    .screen_div_hover {
      width: 106px;
      height: 44px;
      background: #0094ff;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      line-height: 44px;
    }
  }

  .addForm_for {
    flex: 1;
    min-height: 0;
    overflow-y: auto;

    .taxClassName {
      display: flex;

      .taxClassName_flex {
        flex: 1;
      }

      .taxClassName_img {
        margin-left: 15px;
        margin-top: 7px;
        width: 18px;
        height: 18px;
        cursor: pointer;
      }
    }
  }
}

.fontWeight600 {
  font-weight: 600;
  font-size: 16px;
  color: var(--bTextColor);
}

.mb25 {
  margin-bottom: 25px;
}

.add_mechanism_div {
  width: 100%;
  display: flex;
  justify-content: center;

  .add_mechanism {
    width: 275px;
    height: 38px;
    font-size: 16px;
  }
}

.delete_mechanism {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 0;
  cursor: pointer;
  z-index: 50;
}

.flex_div {
  display: flex;
  margin-left: 50px;

  .label {
    min-width: 120px;
    font-size: 14px;
    background-color: rgba(240, 246, 255);
    padding: 4px 7px;

    img {
      width: 14px;
      height: 14px;
    }

    margin-right: 10px;
  }

  .value {
    color: #0094ff;
    font-weight: 400;
    font-size: 14px;
    line-height: 27px;
    cursor: pointer;

    span {
      margin-right: 30px;
    }
  }
}
</style>